<!DOCTYPE HTML>
<html>
 <head>
  <title>innerText debugger</title>
  <style>
    iframe, textarea, pre {
        border: 1px solid black;
        width: 99%;
        height: 8em;
        margin: 0;
        overflow: auto;
    }
    p, h2 {
        margin: 2px 0px;
    }
    h2 {
        font-size: 1em;
    }
  </style>
  <script src="jquery-1.2.3.js" type="text/javascript"></script>
  <script src="innerText.js" type="text/javascript"></script>
  <script>
    if (!window.console || !console.firebug)
    {
        var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
        "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

        window.console = {};
        for (var i = 0; i < names.length; ++i)
            window.console[names[i]] = function() {}
    }

    var timeout;
    var args = {};

    function updateInput(event) {
        if (timeout)
            clearTimeout(timeout);
        timeout = setTimeout(function() {
            loadUrl();
        }, 500);
    }

    function transformSpace(s) {
        if (s === undefined)
            return undefined;
        s = s.replace(/ /g, "\u2423");
        s = s.replace(/\n/g, "\u2022\n");
        s = s.replace(/\t/g, "\u2023");
        return s;
    }

    function setContent(el, txt) {
        while (el.firstChild)
            el.removeChild(el.firstChild);
        el.appendChild(document.createTextNode(transformSpace(txt)));
    }

    function frameLoaded(url) {
        var frame1 = $("#frame1")[0];

        var preInnerHtml = $("#preInnerHTML")[0];
        var preTextContent = $("#preTextContent")[0];
        var preInnerText = $("#preInnerText")[0];
        var preExpected = $("#preExpected")[0];

        var docEl = frame1.contentWindow.document.documentElement;
        setContent(preInnerHtml, docEl.innerHTML);
        setContent(preTextContent, docEl.textContent);

        innerText = toInnerText(docEl);

        setContent(preInnerText, innerText);

        expectedUrl = url.replace(/\.[^\.]*$/, "-expected.txt");
        var expected = $.ajax({
             url: expectedUrl + "?" + Math.random(),
             async: false
        }).responseText;

        // XXX hack. WebKit -execpected files have an additional newline at the end
        if (expected[expected.length - 1] == "\n")
            expected = expected.slice(0, -1);

        setContent(preExpected, expected);

        var sameSpace = innerText == expected;

        var actualNoSpace = innerText.replace(/\s+/g, '');
        var expectedNoSpace = expected.replace(/\s+/g, '');
        var sameNoSpace = actualNoSpace == expectedNoSpace;

        $("#resultSpace").html(sameSpace ? "PASS" : "FAIL");
        $("#resultSpace").css("color", sameSpace ? "lime" : "red");
        $("#resultNoSpace").html(sameNoSpace ? "PASS" : "FAIL");
        $("#resultNoSpace").css("color", sameNoSpace ? "lime" : "red");
    }

    function loadUrl(url) {
        url = url || $("#url").attr("value") || args.u;
        if (!/\.html$/.test(url))
            url += ".html";

        var frame1 = $("#frame1")[0];
        $("#frame1").load(function() {
            frameLoaded(url);
        });
        frame1.setAttribute("src", url + "?" + Math.random());
    }

    function init() {
        var a = document.location.search.substr(1).split('&');
        for (var i = 0 ; i < a.length ; i++) {
            var p = a[i].split('=') ;
            args[p[0]] = p[1];
        }

        $("#load").click(function(e) {
            loadUrl();
            e.preventDefault();
        });

        if (args.u) {
            loadUrl();
        }
    }
  </script>
 </head>
 <body onload="init()">
    space:<span id="resultSpace"></span>&nbsp;
    no space:<span id="resultNoSpace"></span>&nbsp;
    <span id="msg"></span>
    <input id="url" size="100" oninput="updateInput(event)" onkeydown="updateInput(event)"
           type="text" value=""></input>
    <a href="#" id="load">load</a>
    <p><iframe src="blank.html" id="frame1"></iframe></p>
    <h2>innerText</h2>
    <pre id="preInnerText"></pre>
    <h2>expected</h2>
    <pre id="preExpected"></pre>
    <h2>innerHTML</h2>
    <pre id="preInnerHTML"></pre>
    <h2>textContent</h2>
    <pre id="preTextContent"></pre>
 </body>
</html>
